<template>
  <el-dialog
    v-model="visible"
    title="告警详情"
    width="900px"
    :close-on-click-modal="false"
  >
    <div class="detail-content" v-loading="loading">
      <!-- 基本信息 -->
      <div class="detail-section">
        <h3 class="section-heading">📌 告警基本信息</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="告警ID">{{
            alert.alert_id || "-"
          }}</el-descriptions-item>
          <el-descriptions-item label="场景类型">{{
            alert.scene_type_name || alert.scene_type || "-"
          }}</el-descriptions-item>
          <el-descriptions-item label="资产IP">{{
            alert.asset_ip || "-"
          }}</el-descriptions-item>
          <el-descriptions-item label="端口">{{
            alert.asset_port || "-"
          }}</el-descriptions-item>
          <el-descriptions-item label="服务类型">{{
            alert.asset_service || "-"
          }}</el-descriptions-item>
          <el-descriptions-item label="风险等级">
            <el-tag
              :type="
                alert.risk_level === 'critical'
                  ? 'danger'
                  : alert.risk_level === 'high'
                  ? 'warning'
                  : alert.risk_level === 'medium'
                  ? 'info'
                  : ''
              "
            >
              {{ alert.risk_level_name || alert.risk_level || "-" }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="优先级">{{
            alert.priority_name || alert.priority || "-"
          }}</el-descriptions-item>
          <el-descriptions-item label="审核状态">
            <el-tag
              :type="
                alert.review_status === 'pending_review'
                  ? 'warning'
                  : alert.review_status === 'confirmed'
                  ? 'success'
                  : alert.review_status === 'false_positive'
                  ? 'info'
                  : ''
              "
            >
              {{ alert.review_status_name || alert.review_status || "-" }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="检测时间">{{
            formatTime(alert.detected_time)
          }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{
            formatTime(alert.created_time)
          }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 责任人信息 -->
      <div class="detail-section">
        <h3 class="section-heading">👤 责任人信息</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="责任人">{{
            alert.responsible_person || "-"
          }}</el-descriptions-item>
          <el-descriptions-item label="责任部门">{{
            alert.responsible_department || "-"
          }}</el-descriptions-item>
          <el-descriptions-item label="OA账号">{{
            alert.responsible_oa_account || "-"
          }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{
            alert.responsible_phone || "-"
          }}</el-descriptions-item>
          <el-descriptions-item label="邮箱" :span="2">{{
            alert.responsible_email || "-"
          }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 审核信息 -->
      <div class="detail-section" v-if="alert.review_time">
        <h3 class="section-heading">✅ 审核信息</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="审核人">{{
            alert.reviewer_name || "-"
          }}</el-descriptions-item>
          <el-descriptions-item label="审核时间">{{
            formatTime(alert.review_time)
          }}</el-descriptions-item>
          <el-descriptions-item label="审核备注" :span="2">{{
            alert.review_comment || "-"
          }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 告警描述 -->
      <div class="detail-section">
        <h3 class="section-heading">📝 告警描述</h3>
        <div class="description-content">
          {{ alert.description || "无描述" }}
        </div>
      </div>

      <!-- 详细信息 -->
      <div class="detail-section" v-if="alert.detail">
        <h3 class="section-heading">📋 详细信息</h3>
        <div class="detail-text">
          <pre>{{ alert.detail }}</pre>
        </div>
      </div>

      <!-- 场景特定数据 -->
      <div class="detail-section" v-if="alert.scene_data">
        <h3 class="section-heading">🔍 场景数据</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item
            v-for="(value, key) in alert.scene_data"
            :key="key"
            :label="formatSceneDataKey(key)"
          >
            {{ value }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 工单信息 -->
      <div class="detail-section" v-if="alert.ticket_id">
        <h3 class="section-heading">🎫 关联工单</h3>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="工单ID">
            <el-link type="primary" :underline="false">
              TK-{{ String(alert.ticket_id) }}
            </el-link>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>

    <template #footer>
      <el-button @click="handleCancel">关闭</el-button>
      <el-button
        type="primary"
        @click="handleReview"
        v-if="alert.review_status === 'pending_review'"
      >
        审核
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, computed } from "vue";

// 定义props
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  alert: {
    type: Object,
    default: () => ({}),
  },
});

// 定义emits
const emit = defineEmits<{
  (e: "update:modelValue", value: boolean): void;
  (e: "reviewed"): void;
  (e: "review", alert: any): void;
}>();

// visible computed 属性
const visible = computed({
  get: () => props.modelValue,
  set: (value: boolean) => emit("update:modelValue", value),
});

const loading = ref(false);

// 格式化时间
const formatTime = (time: string | null | undefined): string => {
  if (!time) return "-";
  return time.replace("T", " ").substring(0, 19);
};

// 格式化场景数据键名
const formatSceneDataKey = (key: string | number): string => {
  const keyStr = String(key);
  const keyMap: Record<string, string> = {
    vulnerability_name: "漏洞名称",
    cve_id: "CVE编号",
    cvss_score: "CVSS评分",
    confirmed_by: "复核人员",
    confirmed_at: "复核时间",
    poc_path: "POC路径",
    attack_vector: "攻击向量",
  };
  return keyMap[keyStr] || keyStr;
};

// 审核
const handleReview = () => {
  emit("review", props.alert);
};

// 取消
const handleCancel = () => {
  emit("update:modelValue", false);
};
</script>

<style scoped lang="scss">
.detail-content {
  max-height: 600px;
  overflow-y: auto;
  padding-right: 10px;
}

.detail-section {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.section-heading {
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 10px 0;
  color: #555;
  display: flex;
  align-items: center;
  gap: 8px;
}

.description-content {
  padding: 12px;
  background-color: #f9f9f9;
  border-radius: 4px;
  line-height: 1.6;
  color: #666;
  white-space: pre-wrap;
  word-break: break-word;
}

.detail-text {
  padding: 12px;
  background-color: #f9f9f9;
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;

  pre {
    margin: 0;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.6;
    color: #666;
    white-space: pre-wrap;
    word-break: break-word;
  }
}
</style>
